<style lang="less" scoped>
    @import '../../styles/common.less';
    @import '../../styles/loading.less';
    .table-Row {
        display: -webkit-box;
        .titele {
            background-color: #F0F0F0;
            border: 1px solid #D0D0D0;
            font-size: 15px;
            display: flex;
            justify-content:flex-end;
            align-items:Center;
            min-height: 47px;
            font-weight: 700;
            margin-right:-1px;
            margin-bottom:-1px;
            height: auto;
        }
        .content {
            display: flex;
            align-items:Center;
            justify-content:center;
            border: 1px solid #D0D0D0;
            margin-right:-1px;
            margin-bottom:-1px;
        }
        .content div {
            margin: 5px 10px 5px 10px;
        }
    }
</style>

<template>
    <div>
        <Row class="table-Row">
            <Col span="4" class="titele">姓名：</Col>
            <Col span="8" class="content">
            <Input v-model="formData.name" readonly></Input>
            </Col>
            <Col span="4" class="titele">性别：</Col>
            <Col span="8" class="content">
            <Select v-model="formData.sex" disabled>
                <Option v-for="item in sexList" :value="item.id" :key="item.id">{{item.name}}</Option>
            </Select>
            </Col>
        </Row>
        <Row class="table-Row">
            <Col span="4" class="titele">身份证号：</Col>
            <Col span="8" class="content">
            <Input v-model="formData.cardcode" readonly></Input>
            </Col>
            <Col span="4" class="titele">出生日期：</Col>
            <Col span="8" class="content">
            <DatePicker v-model="formData.birthdate" :editable="false" readonly style="width: 100%"></DatePicker>
            </Col>
        </Row>
        <Row class="table-Row">
            <Col span="4" class="titele">就读年级：</Col>
            <Col span="8" class="content">
            <Select v-model="formData.gradeid" disabled>
                <Option v-for="item in gradeList" :value="item.id" :key="item.id">{{item.name}}</Option>
            </Select>
            </Col>
            <Col span="4" class="titele">就读学校：</Col>
            <Col span="8" class="content">
            <Input v-model="formData.school" readonly></Input>
            </Col>
        </Row>
        <Row class="table-Row">
            <Col span="4" class="titele">家长姓名：</Col>
            <Col span="8" class="content">
            <Input v-model="formData.parentname" readonly></Input>
            </Col>
            <Col span="4" class="titele">家长手机号：</Col>
            <Col span="8" class="content">
            <Input v-model="formData.parentphone" readonly></Input>
            </Col>
        </Row>
        <Row class="table-Row">
            <Col span="4" class="titele">家庭电话：</Col>
            <Col span="8" class="content">
            <Input v-model="formData.familyphone" readonly></Input>
            </Col>
            <Col span="4" class="titele">学员英文名：</Col>
            <Col span="8" class="content">
            <Input v-model="formData.ename" readonly></Input>
            </Col>
        </Row>
        <Row class="table-Row">
            <Col span="4" class="titele">点到卡号：</Col>
            <Col span="8" class="content">
            <Input v-model="formData.namingcode" readonly></Input>
            </Col>
            <Col span="4" class="titele">学生卡号：</Col>
            <Col span="8" class="content">
            <Input v-model="formData.stundentcode" readonly></Input>
            </Col>
        </Row>
        <Row class="table-Row">
            <Col span="4" class="titele">家庭地址：</Col>
            <Col span="8" class="content">
            <Input type="textarea" :rows="2" v-model="formData.familyaddress" readonly></Input>
            </Col>
            <Col span="4" class="titele">备注：</Col>
            <Col span="8" class="content">
            <Input type="textarea" :rows="2" v-model="formData.remark" readonly></Input>
            </Col>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>
    </div>
</template>

<script >
    import util from '@/libs/util';
    import Cookies from 'js-cookie';

    export default {
        name: 'exportable-table',
        props: {
            studentid: ''
        },
        data () {
            return {
                columns: [{
                    title: '预约号',
                    key: 'billcode'
                }, {
                    title: '年度',
                    key: 'classYear',
                    render: (h, params) => {
                        return h('div', {}, params.row.course ? params.row.course.classYear : '');
                    }
                }, {
                    title: '学期',
                    key: 'birthdate',
                    render: (h, params) => {
                        return h('div', {}, params.row.course ? params.row.course.classYear : '');
                    }
                }, {
                    title: '班级代码',
                    key: 'cardcode'
                }, {
                    title: '班级名称',
                    key: 'name',
                    render: (h, params) => {
                        return h('div', {}, params.row.course ? params.row.course.name : '');
                    }
                }, {
                    title: '部门',
                    key: 'departmentName',
                    render: (h, params) => {
                        return h('div', {}, params.row.course ? params.row.course.departmentName : '');
                    }
                }, {
                    title: '专业',
                    key: 'marjorName',
                    render: (h, params) => {
                        return h('div', {}, params.row.course ? params.row.course.marjorName : '');
                    }
                }, {
                    title: '课表',
                    key: 'classSchedules',
                    render: (h, params) => {
                        return h('div', {}, params.row.grade ? params.row.grade.name : '');
                    }
                }, {
                    title: '金额',
                    key: 'money'
                }, {
                    title: '报名方式',
                    key: 'signtype'
                }, {
                    title: '报名状态',
                    key: 'status',
                    render: (h, params) => {
                        let text = '';
                        if (params.row.status === 1) text = '待缴费';
                        if (params.row.status === 2) text = '已缴费';
                        if (params.row.status === 3) text = '申请退款';
                        if (params.row.status === 4) text = '已退款';
                        if (params.row.status === 5) text = '已失效';
                        return h('div', {}, text);
                    }
                }],
                baseuser: JSON.parse(Cookies.get('baseUser')),
                data: [],
                formData: {},
                sexList: [{id: 'MAN', name: '男'}, {id: 'WOMAN', name: '女'}],
                gradeList: [],

                total: 0,
                pageIndex: 1,
                pageSize: 5
            };
        },
        watch: {
            studentid (newVal, oldVal) {
                if (newVal) {
                    this.loadDictionaries();
                    this.loadList();
                    this.loadDetail();
                }
            }
        },
        methods: {
            loadDictionaries () {
                util.ajax.post('/base/datadictionary/findByCode', util.toFormData({
                    CODE: 'GRADE'
                })).then(res => {
                    this.gradeList = res.data.data;
                });
            },
            loadList () {
                util.ajax.post('/busine/bill/list', util.toFormData({
                    studentid: this.studentid
                })).then(res => {
                    this.data = res.data.data.list;
                    this.total = res.data.data.total;
                });
            },
            loadDetail () {
                util.ajax.post('/busine/student/detail', util.toFormData({
                    id: this.studentid
                })).then(res => {
                    this.formData = res.data.data;
                });
            }
        }
    }
</script>